<template>
  <div class="contact">
    <Navbar no-back title="领导驾驶舱" />
    <van-tabs v-model:active="curTab" class="the-tabs">
      <van-tab title="最近联系人" :name="TAB_TYPE.RECENT" />
      <van-tab title="组织架构" :name="TAB_TYPE.ALL" />
    </van-tabs>
    <div v-if="TAB_TYPE.RECENT === curTab" class="content user-content">
      <UserItem v-for="item in recentList" :key="item.id" :user="item" />
      <van-empty v-if="!recentList.length" description="没有最近联系人" />
    </div>
    <div v-if="TAB_TYPE.ALL === curTab" class="content">
      <OrgList />
    </div>
    <Tabbar />
  </div>
</template>

<script setup lang="ts">
import { ref, onActivated, onDeactivated } from 'vue'
import Navbar from '@/components/Navbar/index.vue'
import Tabbar from '@/components/Tabbar'
import ContactServe from '@/api/contact.ts'
import UserItem from './comp/userItem.vue'
import OrgList from './comp/orgList.vue'

const TAB_TYPE = {
  RECENT: 'recent',
  ALL: 'all'
}
const curTab = ref<string>(TAB_TYPE.RECENT)

const recentList = ref<IContactor[]>([])

const fetchRecent = () => {
  ContactServe.recentList().then(resp => {
    if (resp.code == 0) {
      const { data } = resp
      recentList.value = data
    }
  })
}

let pullTimer: number | null = null
onActivated(() => {
  fetchRecent()
  pullTimer = window.setInterval(() => {
    fetchRecent()
  }, 10 * 1000)
})

onDeactivated(() => {
  if (pullTimer) {
    window.clearInterval(pullTimer)
    pullTimer = null
  }
})
</script>

<style lang="less">
.contact {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .the-tabs {
    box-shadow: 0px 2px 5px 0px #0000000c;
    // .van-tabs__line {
    //   bottom: 6vw;
    //   width: 24px;
    //   background-color: #3a75c5;
    //   border-radius: 25px;
    //   box-shadow: 0px 2px 2.5px 0px #3a75c533;
    // }
  }
  .content {
    padding-top: 12px;
    overflow: hidden;
    flex-grow: 1;

    &.user-content {
      overflow-y: scroll;
    }
  }
}
</style>
